<template>
  <div class="app-container" v-loading="loading">
    <div style="display:inline">
      <el-progress
        :text-inside="true"
        :stroke-width="24"
        :percentage="rankingData.overPercentage2"
        status="success"
      ></el-progress>
    </div>
    <div style="display:inline">
      <p>
        <i>
          <el-tag v-if="rankingData.overPercentage>=0.5" type="success">后天有利</el-tag>
          <el-tag v-else type="danger">后天不利</el-tag>
          更新时间：{{rankingData.recordedAt}}
        </i>
      </p>
      <p>匹配条件：与{{childData.nickname}}同遗传身高、同年龄、同性别</p>
      <p>检索样本：{{rankingData.samplesNumber}}名</p>
      <p>匹配成功：{{rankingData.matchingNumber}}名</p>
      <p>身高跨度：{{rankingData.heightSpan}}cm</p>
      <p>平均身高：{{rankingData.heightMean}}cm</p>
      <p>{{childData.nickname}}身高：{{rankingData.height}}cm</p>
      <p>{{childData.nickname}}排名：第{{rankingData.ranking}}</p>
      <p>超过其中：{{rankingData.overPercentage2}}%</p>
    </div>
  </div>
</template>

<script>
import { getChildHeightRanking } from "@/api/child/height";

export default {
  name: "childReport",
  props: {
    childId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    childData: {
      type: Object,
      default: () => {
        return {
          ageNum: undefined,
          avatar: undefined,
          birthday: undefined,
          childId: undefined,
          childType: 1,
          familyCode: undefined,
          height: 0,
          heightDad: 0,
          heightInherit: 0,
          heightMum: 0,
          nickname: undefined,
          sex: 1,
          weight: 0
        };
      }
    }
  },
  data() {
    return {
      //排名数据
      rankingData: {
        loading: false,
        height: 0,
        heightMean: 0,
        heightSpan: "",
        matchingNumber: 0,
        overPercentage: 0,
        ranking: 0,
        rankingId: 0,
        recordedAt: "",
        samplesNumber: 0
      }
    };
  },

  mounted() {
    this.getChildHeightRankingData();
  },
  watch: {
    //监听子控件内容的改动,发送给父级组件
    childId: {
      handler(newValue, oldValue) {
        this.getChildHeightRankingData();
      },
      deep: true
    }
  },
  methods: {
    getChildHeightRankingData() {
      this.loading = true;
      getChildHeightRanking(this.childId).then(response => {
        this.loading = false;
        this.rankingData = response.data;
        this.rankingData.overPercentage2 = Math.round(
          this.rankingData.overPercentage * 100
        );
      });
    }
  }
};
</script>